<template>
    <div class="bg-red-400">
        <h1 class="bg-blue-500 text-2xl">Home</h1>
        <p>This is the Home component.</p>
    </div>

    <div class="index">
        <span>当前数值{{ countComputed }}</span>
        <br />
        <span>双倍数值{{ doubleCount }}</span>
        <br />
        <button @click="countStore.countAdd">+1</button>
        <button @click="countStore.countReduce">-1</button>
    </div>
    <div v-show="!isFinished">loding</div>
</template>
<script setup>
import { computed, onMounted } from 'vue'
import { useCountStore } from '@/store'
import { storeToRefs } from 'pinia'
import { useAxios } from '@vueuse/integrations/useAxios'

const countStore = useCountStore()
// 通过计算属性
const countComputed = computed(() => countStore.count)
// 通过 storeToRefs api 结构
const { doubleCount } = storeToRefs(countStore)

const { data, isFinished } = useAxios('/api.json', { method: 'GET', params: { a: 1 } })

onMounted(() => {
    console.log(data)
})
</script>